<template>
  <ul class="news-content">
    <!-- 组件使用 :titleArr 动态绑定传递数据给子组件-->
    <!-- : 父传递给子数据 -->
    <!-- @ 父监听子传递的参数 -->
    <li v-for="item in arr" :key="item.id">
      <!-- template 虚拟标签 -->
      <h1>{{ item.type }}</h1>
      <template v-for="(v, index) in item.children" :key="v.id">
        <div>
          <h3 @click="removeItem(index)">{{ v.title }}</h3>
          <p>{{ v.createTime }}</p>
        </div>
      </template>
    </li>
  </ul>
</template>

<script>
// 数据往下流，逻辑往上走，
// 一般子组件不做逻辑操作，而是把数据参数传递给父组件，让父组件处理逻辑
export default {
  props: {
    arr: {
      type: Array,
    },
  },
  methods: {
    removeItem(index) {
      this.$emit('removeClick', index)
    },
  },
}
</script>

<style></style>
